<template>
<view class="x-radio-button x-row">
  <view class="tag" :class="{'x-inner-small-left': (props.align == 'right'), 'x-inner-small-right': (props.align == 'left')}" @click="onClick(item)" v-for="(item, index) in list">
    <view class="item" :class="{'active': item.value == curValue, 'normal': item.value != curValue}">{{item.label}}</view>
  </view>
</view>
</template>

<script setup>
import {onMounted, watch, ref} from "vue"

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ""
  },
  list: {
    type: Array,
    default: () => {return []}
  },
  align: {
    type: String,
    default: 'left'
  }
})

const onClick = (item) => {
  curValue.value = item.value;
}

const emit = defineEmits([
  'update:modelValue'
])

let curValue = ref("");

onMounted(() => {
  setValue(props.modelValue);
})

watch(() => props.modelValue, (value) => {
  setValue(value);
})

watch(curValue, (value) => {
  emit("update:modelValue", value);
})

const setValue = (value) => {
  nextTick(() => {
    curValue.value = value;
  })
}
</script>

<style scoped lang="less">
.x-radio-button {

  .tag {
    box-sizing: border-box;

    .item {
      padding: 10rpx 16rpx;
      box-sizing: border-box;
      border-radius: 8rpx;
      font-size: 24rpx;
    }

    .normal {
      border: 1px solid #999999;
      color: #999999;
    }

    .active {
      border: 1px solid @primary;
      color: @primary;
    }
  }
}
</style>
